<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
</head>
<!-- onerror 以及 try-catch 也无法捕获Promise实例抛出的异常，只能最后在 catch 函数上处理，

    *  .then或者.catch中return一个Error,不会报错，会被.then捕获
    *  .then第二参数相当于.catch，不过同一个.then里面，第二参数无法捕获第一参数的错误
-->

<body>
	<script>
		// TODO: 1  通过 catch 捕获
		// TODO:  1.1 可以捕获 同步错误 ✅
		// new Promise((resolve, reject)=>{
		//     console.log(obj);
		// }).catch(err=>{
		//     console.log(err);
		// })

		// TODO:  1.2  不可以捕获 异步错误, ❌ 
		// new Promise((resolve, reject) => {
		// 	setTimeout(() => {
		// 		console.log(obj); // 直接报错，不经过catch处理, （可以通过 window.onerror、window.addEventListener("error") 捕获 ）
		// 	});
		// }).catch(err => {
		// 	console.log(err);
		// })

		// TODO:  1.3  不可以捕获 语法错误 ❌
		// new Promise((resolve, reject) => {
		//   var str = "123
		// }).catch(err=>{
		//     console.log(err);
		// })

		// TODO:  1.4  可以捕获 主动抛错 ✅
		// new Promise((resolve, reject) => {
		// 	throw '主动抛错'
		// }).catch(err => {
		// 	console.log(err);
		// })

		// TODO:  1.5  不能捕获到 网络请求的异常 ❌
		// new Promise((resolve, reject) => {
		// 	const img = document.createElement('img')
		// 	img.src = './xxx.png' // 不论是静态资源异常，或者接口异常，错误都无法捕获到。(可以通过 window.addEventListener("error" 捕获)
		// 	document.body.appendChild(img)
		// }).catch(err => {
		// 	console.log(err);
		// })

		// TODO: 2 通过 unhandledrejection 捕获：当Promise 被 reject,或内部同步代码出错 且没有 reject 处理器的时候，会触发.这个错误不会被 window.onerror 以及 window.addEventListener('error') 捕获
		window.addEventListener('unhandledrejection', function (e) {
			e.preventDefault(); // 阻止异常向上抛出
			console.log('unhandledrejection', e);
			// throw e.reason; // 这里可以再次抛给onerror处理
		});
		// new Promise((resolve, reject) => {
		//     reject('promise错误了')
		// })

		// TODO try catch 能捕获 reject，前提是 try 里面是同步代码，异步代码不行，也就是需要加 await
	</script>
</body>

</html>